<template>
  <div>
    <!-- 微信登录 -->
    <div class="contain">
      <div class="model">
        <h1 class="title">微信授权登录</h1>
        <!-- <p class="title2">
          <span>经开区教育事务局</span>
        </p> -->
        <div class="QRcode" id="QRcode"></div>
        <p class="des">请使用微信扫码二维码登录</p>
      </div>
    </div>
  </div>
</template>

<script>
/* global WxLogin:false */

export default {
  data() {
    return {};
  },
  methods: {
    wxInit() {
      const that = this;
      const obj = new WxLogin({
        self_redirect: true,
        id: "QRcode",
        appid: that.$store.state.appid,
        scope: "snsapi_login",
        redirect_uri: encodeURI(window.location.href),
        state: "",
        style: "white",
        href: ""
      });
      console.log(obj);
      // window.WwLogin({
      //   "id" : "QRcode",
      //   "appid" : that.$store.state.appid,
      //   "agentid" : "",
      //   "redirect_uri" :"",
      //   "state" : "",
      //   "href" : "",
      // });
    }
  },
  mounted() {
    this.wxInit();
  }
};
</script>

<style scoped lang="scss">
.contain {
  .model {
    .title {
      text-align: center;
      color: #333;
      font-size: 24px;
      margin-bottom: 41px;
    }
    .title2 {
      font-size: 18px;
      color: $font-color;
      text-align: center;
      margin-bottom: 38px;
      span {
        width: 328px;
        display: inline-block;
        padding: 9px 0;
        background-color: #f3f9ff;
        border-radius: 50px;
      }
    }
    .QRcode {
      width: 273px;
      height: 273px;
      background-color: #999;
      margin: 0 auto 49px auto;
    }
    .des {
      color: $nomal-color;
      text-align: center;
      font-size: 18px;
    }
  }
}
</style>
